<template>
  <div class="wrap">
    <div class="tabs">
      <div
        :class="['tab', active == 'design' ? 'active' : '']"
        @click="active = 'design'"
      >
        设计面板
      </div>
      <div
        :class="['tab', active == 'event-center' ? 'active' : '']"
        @click="active = 'event-center'"
      >
        事件中心
      </div>
    </div>

    <div class="designer-panel">
      <div
        v-if="active == 'design'"
        :class="['animate__animated', designWrapClass, 'dowebok']"
        key="design"
      >
        <designBoard></designBoard>
      </div>
      <div
        v-if="active == 'event-center'"
        class="animate__animated animate__slideInRight dowebok"
        key="model"
      >
        <eventCenter></eventCenter>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, onUpdated, defineComponent, provide } from "vue";
import designBoard from "./design/index.vue";
import eventCenter from "./event-center/index.vue";
import { createLowCode } from "../../core";
import { pmsData } from "@/components/low-code/data/index";
import clone from "clone";

export default defineComponent({
  components: {
    designBoard,
    eventCenter,
    // Button
  },
  setup() {
    const active = ref("design");

    const lowCode = createLowCode({
      isDesigner: true,
      fieldPool: clone(pmsData.formFields.data),
    });

    provide("getLowCodeInstance", () => {
      return lowCode;
    });

    const designWrapClass = ref("");

    onUpdated(() => {
      designWrapClass.value = "animate__slideInRight";
    });

    return {
      active,
      designWrapClass,
    };
  },
});
</script>

<style scoped>
.tabs {
  display: flex;
  box-shadow: 0 0 20px #e0e0e0;
}
.tab {
  width: 80px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
}
.active.tab {
  color: #409eff;
}

.dowebok {
  animation-duration: 0.6s;
}

.designer-panel {
  overflow-x: hidden;
  height: calc(100vh - 60px);
  overflow-y: scroll;
}
</style>
